<template>
    <a-space
        direction = "vertical"
        style = "width: 100%;"
    >
        <a-button
            @click = "flushTable(false)"
        >刷新列表</a-button>
        <a-table
            :columns = "table_columns"
            :data-source = "table_data"
            bordered
        >
            <template
                #headCell = "{ }"
            >
            </template>
            <template
                #bodyCell = "{ column, record }"
            >
                <template
                    v-if = "column.key === 'status'"
                >
                    <a-alert
                        :message = "record.status"
                        :type = '(record.status === "Stopped") ? "warning" : "success"'
                    />
                </template>
                <template v-else-if = "column.key === 'action'">
                    <a-button
                        @click = "enterControlPanel(record.id)"
                    >控制面板</a-button>
                </template>
            </template>
        </a-table>
    </a-space>
</template>

<script>
import Axios from 'axios';
import Dialog from '@/utils/dialog.js';

export default {
    data() {
        return {
            table_data: undefined,
            table_columns: [
                {
                    title: '任务名',
                    dataIndex: 'name',
                    key: 'name'
                }, {
                    title: '描述',
                    dataIndex: 'description',
                    key: 'description'
                }, {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime'
                }, {
                    title: '运行状态',
                    dataIndex: 'status',
                    key: 'status'
                }, {
                    title: '动作',
                    key: 'action'
                }
            ],
            table_data_buffer: undefined
        }
    },
    mounted() {
        this.flushTable(true);
    },
    methods: {
        async getMissionList(quiet, callback) {
            await Axios.get(
                "/mission/list"
            ).then((response) => {
                if (! quiet) {
                    if (response.data.type == 'success')
                        Dialog.toasts.success(response.data.info);
                    else
                        Dialog.toast.error(response.data.info);
                }
                this.table_data_buffer = response.data.mission;
                this.table_data_buffer.forEach((row) => {
                    row.key = row.id
                });
            }).catch(() => {
                // 无论是否是无输出状态，服务未连接的错误是一定要报的
                Dialog.toasts.error("网络错误");
            }).then(() => {
                callback();
            });
        },
        flushTable(quiet) {
            this.getMissionList(quiet, () => {
                this.table_data = this.table_data_buffer;
            });
        },
        enterControlPanel(id) {
            this.$router.push({ 'path': '/mission/panel/' + id });
        }
    }
}
</script>